<template>
    <div class="container">
        <div class="wrapper">
            <div class="from">
                <el-form :model="form" labelWidth="150px" :rules="formRules" ref="formRulesName">
                    <div class="head">
                        <span>基础信息</span>
                    </div>
                    <el-form-item label="用户名：">
                        <el-col :span="16">
                            <el-input v-model="form.username" size="small" disabled="disabled"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="原密码：">
                        <el-col :span="16">
                            <el-input v-model="form.oldPwd" size="small" type="password" auto-complete="off"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="修改密码：" prop="pass">
                        <el-col :span="16">
                            <el-input v-model="form.pass" size="small" type="password" auto-complete="off"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="确认密码：" prop="checkPass">
                        <el-col :span="16">
                            <el-input v-model="form.checkPass" size="small" type="password"
                                      auto-complete="off"></el-input>
                        </el-col>
                    </el-form-item>
                    <div class="head">
                        <span>联系信息</span>
                    </div>
                    <el-form-item label="手机号：">
                        <el-col :span="16">
                            <el-input v-model="form.tel" size="small"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="邮箱：">
                        <el-col :span="16">
                            <el-input v-model="form.email" size="small"></el-input>
                        </el-col>
                    </el-form-item>
                    <div class="button-wrapper">
                        <el-button type="primary" size="medium" @click="submitForm()">提交</el-button>
                    </div>
                </el-form>
                <div class="head">
                    <span>上次登录信息</span>
                </div>
                <table class="table">
                    <tr>
                        <td class="th">登录时间： </td>
                        <td>{{form.login_time}}</td>
                    </tr>
                    <tr>
                        <td class="th">登录IP： </td>
                        <td>{{form.login_ip}}</td>
                    </tr>
                    <tr>
                        <td class="th">使用浏览器： </td>
                        <td>{{form.browser}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
    const form = {
        username: '',
        password: '',
        tel: '',
        email: '',
        login_time: '',
        login_ip: '',
        browser: '',
        oldPwd: '',
        pass: '',
        checkPass: ''
    };
    export default {
        data() {
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    if (this.form.checkPass !== '') {
                        this.$refs.formRulesName.validateField('checkPass');
                    }
                    callback();
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                form: _g.cloneJson(form),
                formRules: {
                    pass: [{validator: validatePass, trigger: 'blur'}],
                    checkPass: [{validator: validatePass2, trigger: 'blur'}],
                },

            }
        },
        created() {
            this.getInfo();
        },
        methods: {
            getInfo() {
                this.apiPost('System/look').then(res => {
                    this.form = res;
                })
            },
            submitForm() {
                this.$refs.formRulesName.validate((valid) => {
                    if (valid) {
                        let data = this.form;
                        this.apiPost('System/modify', data).then(res => {
                            let remind = res.error ? 'error' : 'success';
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.form = _g.cloneJson(form);
                                this.getInfo();
                            } else {
                                this.form = _g.cloneJson(form);
                                this.getInfo();
                            }
                        })

                    } else {
                        return false;
                    }
                });
            },
        },
    }
</script>
<style scoped>
    .table {
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
        font-size: 14px;
        color: #48576a;
    }

    table td {
        text-align: left;
    }

    table .th {
        text-align: right;
        width: 50%;
    }

    .container {
        box-sizing: border-box;
        width: 100%;
        background: #FFFFFF;
    }

    .wrapper {
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 10px;
        width: 500px;
    }

    .wrapper .head {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 36px;
        background: rgba(1, 119, 191, 0.6);
        margin-bottom: 10px;
    }

    .wrapper .head span {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 1);
    }

    .wrapper .from {
        padding: 0 !important;
        border: 1px solid rgba(1, 119, 191, 0.6);
    }

    .button-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        box-sizing: border-box;
    }
</style>
